'use client';

import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Label } from '@/components/ui/Label';
import type { S3StorageConfiguration } from '@/server/db/schema';
import { trpcPureClient } from '@/utils/api';
import { useMutation, useQuery } from '@tanstack/react-query';
import { redirect } from 'next/navigation';
import { use, useCallback } from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';

type CreateStorageForm = S3StorageConfiguration & { name: string };

export default function CreateStoragePage({
  params,
}: {
  params: Promise<{
    id: string;
  }>;
}) {
  const { id } = use(params);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<CreateStorageForm>();

  const { mutateAsync: createStorage } = useMutation({
    mutationFn: trpcPureClient.storages.createStorage.mutate,
  });

  const onSubmit = useCallback<SubmitHandler<CreateStorageForm>>(
    async (data) => {
      await createStorage(data);
      redirect(`/dashboard/apps/${id}/storage`);
    },
    [createStorage, id]
  );

  return (
    <div className="container pt-10 mx-auto">
      <h1 className="text-3xl mb-6 mx-auto max-w-md">Create Storage</h1>
      <form
        className="flex flex-col gap-4 max-w-md mx-auto"
        onSubmit={handleSubmit(onSubmit)}
      >
        <div>
          <Label>Name</Label>
          <Input
            {...register('name', {
              required: 'Name is required',
            })}
          ></Input>
          <span className="text-red-500">{errors.name?.message}</span>
        </div>
        <div>
          <Label>Bucket</Label>
          <Input
            {...register('bucket', {
              required: 'Bucket is required',
            })}
          ></Input>
          <span className="text-red-500">{errors.bucket?.message}</span>
        </div>
        <div>
          <Label>Access Key Id</Label>
          <Input
            {...register('accessKeyId', {
              required: 'Access Key Id is required',
            })}
          ></Input>
          <span className="text-red-500">{errors.accessKeyId?.message}</span>
        </div>
        <div>
          <Label>Secret Access Key</Label>
          <Input
            {...register('secretAccessKey', {
              required: 'Secret Access Key is required',
            })}
            type="password"
          ></Input>
          <span className="text-red-500">
            {errors.secretAccessKey?.message}
          </span>
        </div>
        <div>
          <Label>Region</Label>
          <Input
            {...register('region', {
              required: 'Region is required',
            })}
          ></Input>
          <span className="text-red-500">{errors.region?.message}</span>
        </div>
        <div>
          <Label>API Endpoint</Label>
          <Input {...register('apiEndpoint')}></Input>
        </div>
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}
